<template>
  <div class="colorContainer" :class="{ isDark: isDark }">
    <div class="colorList">
      <span
        class="colorItem iconfont"
        v-for="item in colorList"
        :style="{ backgroundColor: item }"
        :class="{ icontouming: item === 'transparent' }"
        :key="item"
        @click="clickColorItem(item)"
      ></span>
    </div>
    <div class="moreColor">
      <span>{{ $t('color.moreColor') }}</span>
      <el-color-picker
        size="small"
        show-alpha
        v-model="selectColor"
        @change="changeColor"
      ></el-color-picker>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useI18n } from 'vue-i18n'
import { useMainStore } from '@/stores'
import { colorList } from '@/config'

// 定义props
const props = defineProps({
  color: {
    type: String,
    default: ''
  }
})

// 定义emit
const emit = defineEmits(['change'])

// 响应式数�?
const selectColor = ref('')

// 使用store和i18n
const store = useMainStore()
const { isDark } = storeToRefs(store)
const { t } = useI18n()

// 监听�?
watch(() => props.color, () => {
  selectColor.value = props.color
})

// 方法
const clickColorItem = (color) => {
  emit('change', color)
}

const changeColor = () => {
  emit('change', selectColor.value)
}

// 生命周期钩子
onMounted(() => {
  selectColor.value = props.color
})
</script>

<style lang="less" scoped>
.colorContainer {
  &.isDark {
    .moreColor {
      color: hsla(0, 0%, 100%, 0.6);
    }
  }
}

.colorList {
  width: 240px;
  display: flex;
  flex-wrap: wrap;

  .colorItem {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;
  }
}

.moreColor {
  display: flex;
  align-items: center;

  span {
    margin-right: 5px;
  }
}
</style>
